<template>
	<div id="Favourite">
		<el-container>
			<el-header style="height: 55px;">
				<span style="padding-left: 50px; float: left; color: bisque; font-size: 40px; margin-top: 10px;">
					百&nbsp;货&nbsp;商&nbsp;城</span>
				<ul>
					<li>
						<div class="userImg">
							<el-avatar style="margin-top: 10px;" icon="el-icon-s-custom"></el-avatar>
							<!-- 把用户名传递过来 -->
							<span v-if="username">欢迎{{username}}</span>
							<span v-else style="color: skyblue;">
								<router-link to="/MemberLogin">去登录</router-link>
							</span>
						</div>
					</li>
					<li @click='changePage("Index")'>商城首页</li>
					<li @click='changePage("ShopCart")'>购物车</li>
					<li @click='changePage("Favorites")'>收藏夹</li>
					<li style="color: red;" @click='changePage("OrderCenter")'>我的订单</li>
					<li @click='changePage("PerCenter")'>个人中心</li>
					<li v-if="username" @click='changePage("exit")'>退出登录</li>
					<li style="color: greenyellow ; font-size: 22px;" @click='changePage("main")'>管理员入口</li>
				</ul>
			</el-header>
			<el-main>
				<div>
					<p>
						<input type="search" name="" id="" value="" placeholder="请输入搜索内容" />
						<el-button type="primary" icon="el-icon-search">搜索</el-button>
					</p>
					<el-table :data="orderList" style="width: 100%">
						<el-table-column type="expand">
							<template slot-scope="props">
								<el-form label-position="left" inline class="demo-table-expand" label-width="200px">
									<el-form-item label="创建时间">
										<span>{{ props.row.created }}</span>
									</el-form-item>
									<el-form-item label="修改时间">
										<span>{{ props.row.updated }}</span>
									</el-form-item>
									<el-form-item label="支付时间">
										<span>{{ props.row.payment_time }}</span>
									</el-form-item>
									<el-form-item label="发货时间">
										<span>{{ props.row.consign_time }}</span>
									</el-form-item>
									<el-form-item label="交易完成时间">
										<span>{{ props.row.end_time }}</span>
									</el-form-item>
									<el-form-item label="物流名称">
										<span>{{ props.row.shipping_name }}</span>
									</el-form-item>
									<el-form-item label="物流单号">
										<span>{{ props.row.shipping_code }}</span>
									</el-form-item>
									<el-form-item label="收货地址信息">
										<el-button type="info" @click="getOrderAddress(props.row.address_id)">查看收货地址信息
										</el-button>
									</el-form-item>

								</el-form>
							</template>
						</el-table-column>
						<el-table-column label="订单号" prop="order_code">
						</el-table-column>
						<el-table-column label="金额" prop="payment_money">
						</el-table-column>
						<el-table-column label="状态">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.status == 1" type="success">已完成 </el-tag>
								<el-tag v-if="scope.row.status == 2">待支付 </el-tag>
								<el-tag v-if="scope.row.status == 3" type="info">待收货 </el-tag>
								<el-tag v-if="scope.row.status == 4" type="warning">交易关闭 </el-tag>
								<el-tag v-if="scope.row.status == 5" type="danger">已退货 </el-tag>
							</template>
						</el-table-column>
						<el-table-column label="创建时间" prop="created">
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="100">
							<template slot-scope="scope">
								<el-button type="primary" @click="getOrderDetail(scope.row.order_code)">详情</el-button>
								<br />
								<el-button v-if="scope.row.status == 2" type="success" @click="gotoPay(scope.row)">去支付
								</el-button>
								<el-button v-if="scope.row.status == 3" type="warning">待收货</el-button>
								<el-button v-if="scope.row.status == 4" type="info">交易关闭</el-button>
								<el-button v-if="scope.row.status == 5">已退货</el-button>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页器 -->
					<div class="block" style="margin-top:15px;">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="queryWhere.currentPage" :page-sizes="[5,10, 15, 20, 30]"
							:page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
							:total="pageInfo.totalRecord">
						</el-pagination>

					</div>
				</div>
			</el-main>
		</el-container>
		<el-dialog title="订单详情列表" :visible.sync="orderDetailsShowFlag">
			<el-table :data="orderDetailsList">
				<el-table-column property="order_details_id" label="订单详情id" width="100"></el-table-column>
				<el-table-column property="goods_name" label="商品名称" width="100"></el-table-column>
				<el-table-column property="item_num" label="商品购买数量" width="150"></el-table-column>
				<el-table-column property="item_title" label="商品标题" width="150"></el-table-column>
				<el-table-column property="item_price" label="商品单价"></el-table-column>
				<el-table-column property="total" label="商品总金额"></el-table-column>
			</el-table>
		</el-dialog>

		<el-dialog title="等待支付" :visible="showPayListDialog">
			<el-row>
				<el-button type="success" @click="toPayByMoney()" plain>余 额 支 付</el-button>
				<el-button type="success" @click="toAliPay()" plain>支 付 宝 支 付</el-button>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showPayListDialog = false">取 消</el-button>
				<el-button type="primary" @click="showPayListDialog = false">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>
<script>
	export default {
		mounted() {
			//this.getCollectionByMemberId();
		},
		created: function() {

			//来到Favorites页面首先看看有误登录的用户信息
			let memberInfo = window.sessionStorage.getItem("memberInfo");
			if (memberInfo) {
				let memberInfoObj = JSON.parse(memberInfo);
				//console.log('memberInfoObj',memberInfoObj)
				this.username = memberInfoObj.username;
				this.memberId = memberInfoObj.member_id;
				this.initTableData();
			} else {
				this.$notify({
					title: '提示',
					message: "请先登录",
					duration: 2000
				});
				this.$router.push('/MemberLogin');
			}

			//this.total = this.tableData.length;
		},
		data() {
			return {
				showPayListDialog: false,
				orderList: [],
				selectGoodsList: [],
				multipleSelection: [],
				orderDetailsList: [],
				select_lines: 0,
				currentPage: 1, // 当前页码
				total: 20, // 总条数
				pageSize: 5, // 每页的数据条数
				activeIndex: '1',

				username: '',
				memberId: '',

				queryWhere: {
					member_id: "",
					state: 0, //默认 0代表查询所有状态
					currentPage: 1,
					pageSize: 5
				},
				pageInfo: {
					pageSize: 5,
					totalPage: 0,
					totalRecord: 0
				},
				orderDetailsShowFlag: false,
			}
		},
		methods: {
      // 支付宝
      toAliPay(){
        // let addorder = JSON.stringify(this.addorderList);
          window.location.href = "/api/mall/order/confirm?orderList="+this.addorderList.payment_money+"&username="+this.username
      },
			gotoPay(row) {
				this.showPayListDialog = true;
				this.orderList = row;
				console.log("orderList", this.orderList);
			},
			toPayByMoney() {
				let _this = this;
				let url = "/api/mall/OrderServlet2?method=payMoney"
				this.$http.get(url, {
					params: {
						orderList: this.orderList
					}
				}).then(function(response) {
					if (response.data.code == 0) {
						// This.getAddress();
						console.log("成功了");
						_this.$message.info(response.data.msg);
						_this.showPayListDialog = false;
						_this.initTableData();
					} else {
						_this.$message.info(response.data.msg);
					}
				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});
				})
			},
			handleSizeChange: function(pageSize) {
				//alert("修改了每页显示的记录数",val);
				//console.log("修改了每页显示的记录数",val)
				this.queryWhere.pageSize = pageSize;
				this.initTableData(); //重新查数据库。。
			},
			handleCurrentChange: function(curPage) {
				this.queryWhere.currentPage = curPage; //当页页
				this.initTableData(); //重新查数据库。。
			},
			// removeFavoriteItemById: async function(itemId) {
			// 	console.log('itemId', itemId)
			// 	let _this = this;
			// 	let url = "/api/mall/CollectionServlet?method=removeFavoriteById";

			// 	await this.$http.get(url, {
			// 		params: {
			// 			itemId: itemId,
			// 		}
			// 	}).then(function(response) {
			// 		console.log("address服务端返回的数据为:", response);
			// 		if (response.data.code == 0) {
			// 			_this.$message(response.data.msg)
			// 			for (var i = 0; i < _this.cartList.length; i++) {
			// 				if (_this.cartList[i].collection_id == itemId) {
			// 					//数据库操作成功后前台删除
			// 					_this.cartList.splice(i, 1);
			// 					return;
			// 				}
			// 			}
			// 		} else {
			// 			_this.$message(response.data.msg)
			// 		}

			// 	}).catch(function(error) {
			// 		console.log("服务端产生异常为:", error);
			// 		_this.$notify({
			// 			title: '提示',
			// 			message: "系统错误:" + error,
			// 			duration: 2000
			// 		});

			// 	})
			// },

			// 删除单个商品
			// deleteFavoriteGoods(row) {
			// 	this.$confirm('此操作将移除购物车的商品, 是否继续?', '提示', {
			// 		confirmButtonText: '确定',
			// 		cancelButtonText: '取消',
			// 		type: 'warning'
			// 	}).then(async () => {
			// 		this.removeFavoriteItemById(row.collection_id);
			// 	}).catch((e) => {
			// 		console.log(e)
			// 		this.$message.info('已取消删除')
			// 	})
			// },
			getOrderAddress: async function(addressId) {
				console.log('点击了查看收货地址按钮 地址id为', addressId)
				let _this = this;
				let url = "/api/mall/OrderServlet.do?method=getOrderAddressById";

				await this.$http.get(url, {
					params: {
						addressId: addressId,
					}
				}).then(function(response) {
					console.log("address服务端返回的数据为:", response);
					if (response.data.code == 0) {
						_this.orderAddressOnly = response.data.data;
						_this.orderAddressShowFlag = true;
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
			},
			//获得订单详情 对话框 表格显示
			getOrderDetail: async function(order_code) {
				//console.log('order_code', order_code);
				//发送请求查询订单详情

				let _this = this;
				let url = "/api/mall/OrderDetailsServlet2?method=queryDetailsByOrderId";

				await this.$http.get(url, {
					params: {
						order_code: order_code,
					}
				}).then(function(response) {
					console.log("orderdetail服务端返回的数据为:", response);
					if (response.data.code == 0) {
						_this.orderDetailsList = response.data.data;
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
				this.orderDetailsShowFlag = true;

			},

			initTableData: function() {
				let _this = this;
				let url = "/api/mall/OrderServlet2?method=query";
				this.queryWhere.member_id = this.memberId;
				this.$http.get(url, {
					params: this.queryWhere
				}).then(function(response) {
					console.log("服务端返回的数据为:", response);
					if (response.data.code == 0) {
						_this.queryWhere.currentPage = response.data.data.currentPage;
						_this.pageInfo.totalPage = response.data.data.totalPage;
						_this.pageInfo.totalRecord = response.data.data.totalRecord;
						_this.pageInfo.pageSize = response.data.data.pageSize;
						_this.orderList = response.data.data.data;
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
			},

			//页面跳转事件
			changePage(path) {
				window.sessionStorage.setItem('activePath', '/' + path)
				if (path == "exit") {
					window.sessionStorage.removeItem("memberInfo")
					path = "MemberLogin"
					window.sessionStorage.setItem('activePath', '/' + path)
				}
				this.$router.push('/' + path);

			},
			handleSizeChange: function() {
				alert("修改了每页显示的记录数");
			},
			handleCurrentChange: function(curPage) {
				this.queryWhere.currentPage = curPage; //当页页
				this.initTableData(); //重新查数据库。。
			},
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	#Favourite {
		position: absolute;
		display: flex;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* background-color: #FF0000; */
	}

	.el-header {
		background-color: #cccccc;
		color: #333;
		text-align: center;
		height: 5%;
		line-height: 25px;
	}

	.el-main {
		/* background-color: #00ffff; */
		text-align: center;
		width: 100%;
		height: 95%;
	}

	.el-main>div {
		width: 70%;
		margin: 0px auto;
		padding-top: 20px;
		/* background-color: #0000FF; */
	}

	.el-container {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
	}

	.el-header>ul {
		position: absolute;
		right: 5px;
	}

	.el-header>ul>li {
		float: left;
		list-style: none;
		margin: 5px;
		user-select: none;
	}

	.el-header>ul>li:not(:first-child):hover {
		color: red;
		text-decoration: underline;
	}

	.el-avatar {
		position: absolute;
		left: -30px;
		top: 2px;
		width: 33px;
		height: 30px;
		color: #42B983;
		/* border: 1px solid #0000FF; */
	}

	.el-avatar--icon {
		font-size: 35px;
	}

	input[type="search"] {
		width: 600px;
		height: 35px;
		font-size: 15px;
		outline: none;
		border: 2px solid #0000FF;
		border-radius: 5px;
	}

	.el-main>div>p>.el-button {
		width: 60px;
		height: 35px;
		font-size: 15px;
		margin-bottom: 20px;
	}

	.item {
		width: 50px;
		height: 30px;
	}

	.cart-option {
		position: relative;
		height: 31px;
		/* font-size: 50px; */
		background-color: #c3c3c3;
		border: 1px solid transparent;
	}

	.cart-option>.el-button {
		position: absolute;
		left: 5px;
		top: 2px;
		height: 25px;
		line-height: 25px;
	}

	ul>li {
		font-size: 20px;
		padding: 10px;
	}
</style>
